import NavLink from "../NavLink"
import {useEffect, useRef} from "react";
import {createStyles, keyframes} from 'antd-style';
const fadeAndScaleIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
      `;
const Hero = () => {
const heroRef = useRef(null);

// 使用 useEffect 来处理动画逻辑
useEffect(() => {
    if (heroRef.current) {
        setTimeout(() => {
            heroRef.current.classList.add("visible");
        }, 100);
    }
}, []);
    return(<section  ref={heroRef}
                     className="fade-in"
                     style={{animation: `${fadeAndScaleIn} 1s ease-in-out`}}>
        <div className="custom-screen py-28 text-gray-600">
            <div className="space-y-5 max-w-4xl mx-auto text-center">
                <h1 className="text-4xl text-gray-800 font-extrabold mx-auto sm:text-6xl">
                    嵇康软件开发工作室
                </h1>
                <p className="max-w-xl mx-auto">
                    云原生，AI赋能，快速、安全、可靠。
                </p>
                <div className="flex items-center justify-center gap-x-3 font-medium text-sm">
                    <NavLink
                        href="/get-started"
                        className="text-white bg-gray-800 hover:bg-gray-600 active:bg-gray-900 "
                    >
                        开始
                    </NavLink>
                    <NavLink
                        href="#cta"
                        className="text-gray-700 border hover:bg-gray-50"
                        scroll={false}
                    >
                        了解更多
                    </NavLink>
                </div>
            </div>
        </div>
    </section>
    );
}

export default Hero